<template>
	<view>
		<!--头部-->
		<view class="user_info">
			<!--邀请码-->
			<view class="invite">
				<text>
					<navigator url="/pages/money/withDraw">提现</navigator>
				</text>
			</view>
			<!--张-用户信息-->
			<view class="users">
				<view class="users_left">
					<text>{{firstName}}</text>
				</view>
				<view class="users_right">
					<view class="users_rightUp"><text>{{userInfo.userName}}({{userInfo.phone}})</text></view>
					<view class="users_rightDown"><text>余额：{{userInfo.balance}}元</text></view>
				</view>
			</view>
			<!--提现奖金-->
			<view class="users_money">
				<view class="users_moneyLeft" @click="usersMoney('exchangeCoin')">
					<view><text>{{userInfo.integral}}</text></view>
					<view><text>上架累计积分</text></view>
				</view>
				<view class="users_moneyRight" @click="usersMoney('exchangeOrder')">
					<view><text>0.00</text></view>
					<view><text>已兑换订单</text></view>
				</view>
			</view>
		</view>

		<!--中部菜单-->
		<view class="menu_box">
			<view class="menu_list" v-for="(item,index) in menulist" @click='onClick(index)'>
				<img :src="item.img" mode="widthFix" draggable="false" />
				<text>{{item.text}}</text>
			</view>
		</view>

		<!--底部导航-->
		<view class="money">
			<my_item @myItemClick="itemClick" v-if="item.visible" v-for="(item,index) in my_items" :key="item.label" :myItem="item">
			</my_item>
		</view>

		<view class="my_login">
			<button type="default" @click="loginOut">退出登录</button>
		</view>
	</view>
</template>

<script>
	import { getUserInfo  } from '@/request/api/my.js'
	import { login } from '../../request/api/login';
	import my_item from '@/components/my_item.vue'
	export default {
		name: 'my',
		components: {
			my_item
		},
		onShow() {
			this.getUser()
		},
		data() {
			return {
				firstName:'',
				my_items: [{
						img: '../../static/c13c841.png',
						label: '绑定信息',
						url: 'userInfo',
						visible: true
					},
					{
						img: '../../static/7cb6b249.png',
						label: '地址管理',
						url: 'address',
						visible: true
					},
					{
						img: '../../static/gh34f5f.png',
						label: '修改密码',
						url: 'loginPass',
						visible: true
					},
					{
						img: '../../static/7044826f.png',
						label: '商品积分兑换',
						url: 'product',
						visible: true
					},
					{
						img: '../../static/7044826f.png',
						label: '上架积分兑换数字',
						url: 'exchangeCoin',
						visible: false
					}
				],
				menulist: [{
						url: "",
						img: "../../static/t1.png",
						text: "等待付款"
					},
					{
						url: "",
						img: "../../static/t2.png",
						text: "收款确认"
					},
					{
						url: "",
						img: "../../static/t3.png",
						text: "委托代卖"
					},
					{
						url: "",
						img: "../../static/t4.png",
						text: "已卖出"
					}
				],
				userInfo: {
					balance: '',//余额
					integral: '',//上架累计积分
					userName: '',//用户姓名
					phone: '',//电话号码
				}
			}
		},
		methods: {
			onClick(index) {
				uni.setStorageSync('abc', index + 1),
					console.log(uni.getStorageSync('abc'))
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			itemClick(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			usersMoney(id) {
				uni.navigateTo({
					"url": id
				})
			},
			loginOut() {
				uni.setStorageSync('token', '')
				uni.navigateTo({
					url: '/pages/users/login'
				})
			},
			async getUser() {
				const res = await getUserInfo()
				if(res.data){
					this.userInfo = res.data	
					if(this.userInfo.userName&&this.userInfo.userName.length>0){
						this.firstName = this.userInfo.userName.substring(0,1)
					}
				}
			}

		}

	}
</script>

<style scoped>
	.user_info {
		background-color: #2866f9;
		border-radius: 10px;
		padding-top: 26px;
		padding-bottom: 15px;
		background-size: 100% 100%;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.invite {
		z-index: 1;
		position: absolute;
		right: 0;
		top: 10px;
		height: 24px;
		background-color: #729cff;
		font-size: 14px;
		font-weight: 400;
		color: #fff;
		line-height: 24px;
		display: flex;
		align-items: center;
		flex-direction: row;
		border-radius: 10px 0 0 10px;
		padding: 0px 10px;
	}

	.users {
		display: flex;
		flex-direction: row;
		margin-left: 10px;
	}
	.users_left{
		width: 62px;
		height: 62px;
		border-radius: 50%;
		border: 3px solid #fff;
	}

	.users_left text {
		text-align: center;
		font-size: 30px;
		color: white;
		line-height: 62px;
		display: block;
	}

	.users_right {
		margin-top: 10px;
		margin-left: 10px;
	}

	.users_right text {
		font-size: 15px;
		font-weight: 700;
		color: #fff;
	}

	.users_money {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.users_moneyLeft,
	.users_moneyRight {
		padding-left: 15px;
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.users_money text {
		font-size: 15px;
		font-weight: 700;
		color: #fff;
	}

	/* 分类菜单 */
	.menu_box {
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		padding: 10px 0px;
	}

	.menu_list {
		box-sizing: border-box;
		flex: 1;
		flex-direction: column;
		display: flex;
		align-items: center;
	}

	.menu_list img {
		background-color: #eee;
		border-radius: 50%;
		border: 3px solid #fff;
		width: 32px;
		padding: 10px;
	}

	.menu_list text {
		font-size: 12px;
		text-align: left;
	}

	.money_action {
		margin-top: 10px;
		box-shadow: 0 0 10px hsla(0, 0%, 78.4%, .5);
		background: #fff;
		border-radius: 5px;
		padding: 10px 0px;
	}

	.money_action image {
		width: 36px;
	}

	.action_jltop {
		padding-top: 10px;
	}

	.my_login {
		margin: 20px 20px;
	}

	.my_login button {
		background-color: #2866f9;
		color: white;
	}
</style>